/* ==========================================================================
   Elements
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.5em; }

body {
  font-family: 'Roboto', sans-serif;
  color: #17375b;
  font-size: 16px; }

h1 {
  color: white;
  font-size: 2em;
  line-height: 1.5em;
  font-style: italic;
  font-weight: 700; }
  @media (min-width: 768px) {
    h1 {
      font-size: 1.6em; } }

h2 {
  color: #11a0db; }

a {
  color: #11a0db;
  text-decoration: underline; }

strong {
  font-weight: 700; }

::-moz-selection,
::selection {
  background: #b3d4fc;
  text-shadow: none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not(.search-field),
textarea {
  padding: 10px 10px 10px 10px !important;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1em;
  max-width: 100%;
  margin-bottom: 0.0em;
  border: none;
  text-align: left;
  background: #17375b !important;
  color: white; }
  input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not(.search-field)::placeholder,
  textarea::placeholder {
    color: rgba(255, 255, 255, 0.8); }
  body.dark input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not(.search-field), body.dark
  textarea {
    background: white !important;
    color: #17375b; }
    body.dark input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not(.search-field)::placeholder, body.dark
    textarea::placeholder {
      color: #17375b; }

button {
  color: #17375b;
  text-transform: uppercase;
  border-radius: 10px;
  background: #e1e2e1;
  border: none;
  min-width: 10em;
  margin: 3em auto 1em;
  display: block; }
  body.dark button {
    color: white;
    background: #17375b; }

.container {
  padding: 1em;
  margin: 0 auto; }
  @media (min-width: 768px) {
    .container {
      max-width: 768px; } }

/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

#site-header {
  color: white;
  position: relative;
  border-bottom: 6px solid #11a0db; }
  #site-header #header-images {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    #site-header #header-images img {
      width: auto;
      max-width: none;
      height: 100%;
      position: absolute; }
      @media (min-width: 996px) {
        #site-header #header-images img {
          width: 100%;
          height: auto; } }
  #site-header .powered-by {
    font-size: 0.9em;
    font-style: italic;
    padding: 0.5em;
    margin-bottom: 2em; }
    @media (min-width: 768px) {
      body.dark #site-header .powered-by {
        right: auto;
        left: 0; } }
  #site-header .logo {
    font-weight: 300;
    font-size: 2em;
    line-height: 1.5em;
    margin-bottom: 0.5em; }
    body.dark #site-header .logo {
      text-align: right; }
  #site-header .form-container {
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
    background: #17375b; }
    #site-header .form-container .left-col {
      padding: 1em;
      position: relative;
      min-height: 400px; }
      #site-header .form-container .left-col h1 {
        position: relative;
        top: 0;
        left: 0;
        padding: 0.5em;
        z-index: 5; }
      #site-header .form-container .left-col #intro-images {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow: hidden; }
        #site-header .form-container .left-col #intro-images img {
          width: 100%;
          max-width: none;
          height: auto;
          position: absolute; }
          @media (min-width: 520px) {
            #site-header .form-container .left-col #intro-images img {
              width: auto;
              height: 100%; } }
      body.dark #site-header .form-container .left-col h1 {
        position: absolute;
        bottom: 0;
        top: auto; }
        @media (min-width: 520px) {
          body.dark #site-header .form-container .left-col h1 {
            text-align: right; } }
      @media (min-width: 520px) {
        #site-header .form-container .left-col {
          width: 40%; } }
    #site-header .form-container .right-col {
      background: #17375b;
      padding: 1em; }
      #site-header .form-container .right-col h2 {
        text-transform: uppercase;
        font-weight: 300;
        color: white;
        padding-left: 0.5em; }
      #site-header .form-container .right-col .looking {
        text-align: right;
        margin-top: 2em;
        margin-bottom: 0;
        font-weight: 300;
        font-style: italic; }
        body.dark #site-header .form-container .right-col .looking {
          color: #17375b; }
      body.dark #site-header .form-container .right-col {
        background: white; }
        body.dark #site-header .form-container .right-col h2 {
          color: #17375b; }
      @media (min-width: 520px) {
        #site-header .form-container .right-col {
          width: 60%; } }
    @media (min-width: 520px) {
      #site-header .form-container {
        display: flex; } }
    #site-header .form-container form label {
      display: block;
      border-bottom: 1px solid white;
      margin: 0 0 1em 0;
      padding: 0.5em 1em; }
      body.dark #site-header .form-container form label {
        border-bottom: 1px solid #17375b; }
    #site-header .form-container form .forgotPassword {
      text-align: right;
      margin: 0;
      font-weight: 300; }
      #site-header .form-container form .forgotPassword a {
        color: white;
        text-decoration: none;
        font-size: 0.9em; }
        body.dark #site-header .form-container form .forgotPassword a {
          color: #17375b; }

#main-content {
  padding: 2em 0; }
  body.dark #main-content {
    color: white;
    background: #17375b; }
    body.dark #main-content h2 {
      color: white; }

#site-footer {
  background: #e1e2e1;
  font-size: 0.8em;
  padding: 2em 0; }
  #site-footer p {
    margin: 0; }